<template>
  <!-- 待遇可视化 -->
  <div class="for-money">
    <van-cell-group>
      <van-field v-for="(item,index) in modelData" v-model="info[item.prop]" :key="index" :placeholder="item.placeholder||'请输入'" :type="item.number" clearable :label="item.label" :left-icon="item.icon" :right-icon="item.right_icon" @click-right-icon="showNotice" />
    </van-cell-group>
    <van-button class="mb5" size="large" type="primary" @click="addNewData" :loading="isloading" loading-text="绘图中...">查看曲线</van-button>
    <van-button class="mt5" size="large" type="danger" @click="showRecords" :disabled="norecords">以往记录</van-button>
  </div>
</template>
<script>
import config from './config.js'
export default {
  components: {},
  data() {
    return {
        modelData:config.modelData,
        info:{
          name:"",
          base:"",
          workdays:"",
          subsidy:"",
          annualLeave:"",
          socialsecurity:"",
          fund:"",
        },//录入的信息
        isloading:false,
        norecords:true,
    };
  },
  methods:{
      showNotice(){
        this.$dialog.alert({
          title: config.notice.title,
          message: config.notice.content,
          messageAlign:"left"
        })
      },

      /**
       * @name 写入新填写的数据
       */
      addNewData(){
        this.isloading=true
        this.info.date=new Date().toLocaleDateString()
        
        let savedInfo = localStorage.getItem(localSaved.savedMoneyInfo)
        let results=[];
        if(!savedInfo){
          results=[this.info]
        }else{
          results=JSON.parse(savedInfo)
          results.push(this.info)
        }
        localStorage.setItem(localSaved.savedMoneyInfo,JSON.stringify(results))
        setTimeout(()=>{
          this.showRecords()
          this.isloading=false
        },1200)
      },

      /**
       * @name localstorage回写记录
       */
      showRecords(){
        this.$router.push("/visualization/formoney/echarts")
      },

      init(){
        config.modelData.forEach((ele,index)=>{
          if(index>0)this.info[ele.prop]=0
        })
        this.norecords=localStorage.getItem(localSaved.savedMoneyInfo)?false:true
      }
  },
  created() {
    this.init()
    // localStorage.removeItem(localSaved.savedMoneyInfo)
  }
};
</script>
<style lang='scss' scope>
.for-money {
  .btn {
    width: 150px;
  }
}
</style>